<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增问卷题目')" />
<th:block th:include="include :: bootstrap-editable-css" />
</head>
<body>
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m">
			<input id="answerIndex" th:value="${answerIndex}" type="hidden">
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">样式类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="showStyle">
								<option value="01">默认</option>
								<option value="02">边框</option>
								<option value="03">拼接</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">展示类型：</label>
						<div class="col-sm-8">
							<select class="form-control" id="showType">
								<optgroup label="--问题答案同行--">
									<option value="01">一行一列</option>
									<option value="02">一行二列</option>
									<option value="03">一行三列</option>
									<option value="04">一行四列</option>
								</optgroup>
								<optgroup label="--问题答案分行--">
									<option value="11">一行展示</option>
								</optgroup>
							</select>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label is-required">题目显示：</label>
						<div class="col-sm-8">
							<select class="form-control" id="isShowTitle">
								<option value="0">显示题目</option>
								<option value="1">显示选项</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-sm-6"></div>
			</div>
			<div class="row" id="d_group_div">
				<div class="col-sm-12">
					<div class="form-group">
						<label class="col-sm-2 control-label is-required">分组题干：</label>
						<div class="col-sm-10">
							<input class="form-control" type="text" id="titleGroup">
						</div>
					</div>
				</div>
			</div>
			<div class="row">
			<div class="col-sm-12">
				<button type="button" class="btn btn-white btn-sm"
					onclick="addColumn()">
					<i class="fa fa-plus"> 增加</i>
				</button>
				<button type="button" class="btn btn-white btn-sm"
					onclick="sub.delColumn()">
					<i class="fa fa-minus"> 删除</i>
				</button>
				<div class="col-sm-12 select-table table-striped">
					<table id="table-answer"></table>
				</div>
			</div>
		</div>
		</form>

	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-table-editable-js" />
	<script th:inline="javascript">
		var prefix = ctx + "qa/questions"
		
		$(document).ready(function(){
			
			$("#showStyle").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].showStyle']").val());
			$("#showType").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].showType']").val());
			$("#isShowTitle").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].isShowTitle']").val());
			$("#titleGroup").val(parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].titleGroup']").val());
			
			
			$("#d_group_div").css("display", "none");
			var qt = parent.$("select[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].questionsType']").val();
			if (qt == '02' || qt == '04') {
				$("#d_group_div").css("display", "block");
			}

			//实例化表格
			var data = parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].answer']").val();
			if ($.trim(data) == '') {
				data = [];
			} else {
				data = JSON.parse(data);
			}
						
		
			var options = {
					id: 'table-answer',
	                pagination: false,
	                showSearch: false,
	                showRefresh: false,
	                showToggle: false,
	                showColumns: false,
	                sidePagination: "client",
	                onEditableSave: onEditableSave,
	                data: data,
	                columns: [{
	                    checkbox: true
	                },
	                {
	                    field: 'index',
	                    align: 'center',
	                    title: "序号",
	                    formatter: function (value, row, index) {
	                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
	                    	return columnIndex + $.table.serialNumber(index);
	                    }
	                },
	                {
	                    field: 'answerText',
	                    align: 'center',
	                    title: '答案内容',
	                    editable: true
	                },
	                {
	                    field: 'inputType',
	                    align: 'center',
	                    title: '输入类型',
	                    editable : {
							type : 'select',
							title : '输入类型',
							source : [{
								value : '01',
								text : "无"
							}, {
								value : "02",
								text : "文本"
							}, {
								value : "03",
								text : "时间"
							}]
						}
	                },
	                {
	                    field: 'isDefault',
	                    align: 'center',
	                    title: '是否默认',
	                    editable : {
							type : 'select',
							title : '是否默认',
							source : [{
								value : '01',
								text : "否"
							}, {
								value : "02",
								text : "是"
							}]
						}
	                },
	                {
	                    field: 'remark',
	                    align: 'center',
	                    title: '备注',
	                    editable: true
	                },
	                {
	                    field: 'rightKey',
	                    align: 'center',
	                    title: '正确答案',
	                    editable: true
	                },
	                {
	                    field: 'score',
	                    align: 'center',
	                    title: '分值',
	                    editable: true
	                },
	                {
	                    field: 'scoreType',
	                    align: 'center',
	                    title: '得分方式',
	                    editable : {
							type : 'select',
							source : [{
								value : '01',
								text : "="
							}, {
								value : "02",
								text : "包含"
							}]
						}
	                }]
	            };
	            $.table.init(options);
		});
		
		
		$("#form-questions-add").validate({
			focusCleanup : true
		});


		function addColumn() {
            var count = $("#table-answer").bootstrapTable('getData').length;
        	
            $("#table-answer").bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    answerText: "",
                    inputType: "01",
                    isDefault: "01",
                    remark: "",
                    rightKey: "",
                    score: 0,
                    scoreType: "01"
                }
            });
        }
		
		function onEditableSave (field, row, rowIndex, oldValue, $el) {
			var scoreCount = 0;
        	var answer = $("#table-answer").bootstrapTable('getData');
			$.each(answer,function(index,item){
				if(item.score>scoreCount){
					scoreCount = item.score;
				}
			});
			
			var answerStr = JSON.stringify(answer);
			parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].totalScore']").val(scoreCount);
			parent.$("input[name='questionnaireQuestionsList["+[[${answerIndex}]]+"].answer']").val(answerStr);
        }
		
		
		
		
	</script>
</body>
</html>
